<template>
    <div>
        <!-- Header Start -->
        <el-card shadow="never" class="!border-none">
            <el-page-header content="设置支付方式" @back="$router.back()" />
        </el-card>
        <!-- Header End -->

        <!-- Main Start -->
        <el-card shadow="never" class="!border-none mt-4">
            <div
                class="m-t-24"
                style="padding-bottom: 50px"
                v-for="(value, key, index) in tableData"
                :key="index"
            >
                <div class="mb-[24px]" v-if="key == 'minprogram'">
                    <span class="text-lg font-medium">微信小程序</span>
                    <span class="text-xs ml-[10px] form-tips">在微信小程序中付款的场景</span>
                </div>
                <div class="text-lg mb-[24px]" v-if="key == 'officialAccounts'">
                    微信公众号
                    <span class="text-xs muted ml-[10px]"
                        >在微信公众号H5页面中付款的场景，公众号类型一般为服务号</span
                    >
                </div>
                <!-- <div class="lg m-b-24 card-title" v-if="index == 3">
        H5支付
        <span class="xs muted m-l-10">在浏览器H5页面中付款的场景</span>
      </div>
      <div class="lg m-b-24 card-title" v-if="index == 4">
        PC商城
        <span class="xs muted m-l-10">在PC商城页面中付款的场景</span>
      </div>
      <div class="lg m-b-24 card-title" v-if="index == 5">
        APP支付
        <span class="xs muted m-l-10">在APP中付款的场景</span>
      </div>
      <div class="lg m-b-24 card-title" v-if="index == 7">
        字节小程序
        <span class="xs muted m-l-10">在字节小程序中付款的场景</span>
      </div>-->
                <!-- 支付列表主体 -->
                <el-table v-if="value.length" :data="value" style="width: 100%">
                    <el-table-column prop="icon" label="图标" width="150">
                        <template #default="scope">
                            <!-- {{scope.row}} -->
                            <el-image :src="scope.row.payImage" style="width: 34px; height: 34px" />
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="payName"
                        label="支付方式"
                        min-width="150"
                    ></el-table-column>
                    <el-table-column label="默认支付" min-width="150">
                        <template #default="scope">
                            <el-radio
                                v-model="scope.row.isDefault"
                                :label="1"
                                :name="1"
                                @change="changeRadioPaymentSet(scope.$index, key)"
                                >设为默认</el-radio
                            >
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="开启状态" min-width="150">
                        <template #default="scope">
                            <el-switch
                                v-model="scope.row.status"
                                :active-value="1"
                                :inactive-value="0"
                            />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <!-- Main End -->

        <!-- Footer Start -->
        <footer-btns>
            <el-button v-perms="['system:payway:update']" type="primary" @click="onSubmit"
                >保存</el-button
            >
        </footer-btns>
        <!-- Footer End -->
    </div>
</template>

<script lang="ts" setup>
import { apiPaymentWaySet, apiPaymentWayLists } from '@/api/setting/payment'
import { ref } from 'vue'
import FooterBtns from '@/components/footer-btns/index.vue'

/** Data Start **/
const router = useRouter()
const tableData: any = ref<Array<any>>([])
/** Data End **/

/** Methods Start **/
/**
 * @description 切换默认支付方式,去除其它选项
 */
const changeRadioPaymentSet = (cIndex: number, key: any): void => {
    console.log(tableData.value[key])
    tableData.value[key].forEach((element: any) => {
        element.isDefault = 0
    })
    tableData.value[key][cIndex].isDefault = 1
}
/**
 * @description 初始化支付方式
 */
const initPaymentWay = async (): Promise<void> => {
    tableData.value = await apiPaymentWayLists()
}
/**
 * @description 编辑支付方式
 */
const handlePaymentWayEdit = async (): Promise<void> => {
    await apiPaymentWaySet({ ...tableData.value })
    router.back()
}
/**
 * @description 提交娇艳
 */
const onSubmit = (): void => {
    handlePaymentWayEdit()
}
/** Methods End **/

/** LifeCycle Start **/
initPaymentWay()
/** LifeCycle End **/
</script>
